<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue.set实例</h1>
    <hr>
    <div id="app">
        <div> {{count}}</div><br>
        <div>{{arr}}</div><br>
       <button onclick="add()">add</button>

    </div>

        <script type="text/javascript">
            function add(){
                //1.修改count数
                // Vue.set(soutsideData,"count",3);
                // 2.直接修改soutsideData对象属性
                // soutsideData.count++;
                // 使用构造器修改
                // app.count++;

                //当修改数组时,js捕捉不到数组元素改变，不能主动刷新dom元素
                // soutsideData.arr[1] = 34255;
                //使用vue.set可以有效避免这个情况，会自动刷新dom树
                Vue.set(soutsideData.arr,1,34255);
            }
            //外部数据
            var soutsideData={
                count:1,
                name:"小红",
                arr:[12,334,556,777,22]
            }


            var app = new Vue({
                el:'#app',
                data:soutsideData
            })
        </script>
</body>
</html>